<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no" />
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../../icon/iconfont.css" />
    <style>
        .aui-tab-item.aui-active {
            color: #D2984D;
            border-bottom: 2px solid #D2984D;
        }

        .couponList {
            overflow: hidden;
            border-bottom: 1px solid #eee;
            display: flex;
            align-items: center;
            height: 5rem;
        }

        .content .couponList:nth-of-type(1) {
            padding-top: 0;
        }

        .couponImg,
        .couponCenter {
            float: left;
        }

        .couponBtn {
            float: right;
            min-width: 3rem;
            height: 6.3rem;
            display: flex;
            align-items: center;
            position: relative;
        }

        .couponImg {
            width: 4.5rem;
            height: 4.5rem;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 0.6rem;
        }

        .couponCenter p {
            color: #000;
            padding: .1rem 0;
        }

        .couponCenter p:nth-of-type(1) {
            font-size: 0.9rem;
        }

        .couponBtn button {
            background-color: rgb(215, 32, 66);
            min-width: 3rem;
            height: 1.3rem;
            color: rgb(251, 194, 205);
            line-height: 1.3rem;
            position: absolute;
            right: 0;
            top:2.5rem;

        }

        .action-btn {
            background-color: #D2984D;
            color: #FFF;
        }

        .actioned-btn {
            background-color: #808ECB;
            color: #FFF;
        }

        .godesc {
            position: absolute;
            font-size: .8rem;
            color: #666;
            right: 9px;
        }

        .Isnone {
            display: none;
            text-align: center;
            color: #D2984D;
            font-size: 16px;
            padding-top: 8rem;
            width:100%;
        }

        .hexiao {
            display: none;
        }

        .topNum {
            display: inline-block;
        }

        .topNum div {
            width: 40%;
            float: left;
            margin: .5rem 5%;
        }

        .datenum {
            font-size: 13px;
            color: rgba(0, 0, 0, .5);
            padding: 0 15px 0 0;
        }

        .datenum-val {
            font-size: 20px;
            font-weight: bold;
            color: #D2984D;
        }

        .itemlist {
            margin: .5rem 0 0 0;
        }

        .items {
            border-top: #eee solid 1px;
            padding: .5rem 0 0 0;
        }
        .items:first-child{border:0;}

        .desc ul li {
            font-size: 13px;
            padding: 1px 0;

        }

        .desc ul li label {
            color: #D2984D;
            font-size: 14px;
        }
        header{
          padding: 1.6rem 0.8rem 0.5rem 0.8rem;
          position: fixed;
          width: 100%;
          z-index: 999;
          border-bottom: 1px solid #eee;
          background-color: #fff
        }
        header span:nth-of-type(1){
          font-size: 1rem
        }
        header span:nth-of-type(2){
          font-size: 1rem;
        }
    </style>
</head>

<body>
  <header>
    <span class="iconfont icon-fanhui" onClick="api.closeWin()"></span>
    <span>商家中心</span>
  </header>
    <div class="max-box">
        <div class="aui-tab" style="position:fixed;top:3.6rem;width:100%;background-color:b;z-index:99">
            <div class="aui-tab-item tapmode aui-active" data-status="0">预订</div>
            <div class="aui-tab-item tapmode" data-status="1">核销</div>
        </div>
        <!-- 预订列表 -->
        <div class="item-list orderList" style="padding-top:6rem"></div>
        <div class="Isnone">暂无相关信息哦！</div>
        <!-- 核销信息 -->
        <div class="hexiao"></div>
    </div>
</body>
<script type="text/javascript" src="../../../lib/zepto.js"></script>
<script type="text/javascript" src="../../../script/api.js"></script>
<script type="text/javascript" src="../../../script/dns.js"></script>
<script type="text/javascript" src="../../../lib/artTemplate/template.js"></script>
<script id="OrderTemplate" type="text/html">
    {{each data as value index}}
    <div class="item" style="padding: .1rem .5rem;">
        <div class="couponList">
            <div class="couponImg" style="width:3.5rem; height:3.5rem; margin:0 1.5rem 0 0;">
                <img style="width:100%; height:100%" src="{{data[index].user.avatar}}" alt="">
            </div>
            <div class="couponCenter">
                <p>{{data[index].user.nickname}}<span style="display:none;" class="godesc">查看详情</span></p>
                <p>{{data[index].name}}/<a href="" style="color:rgb(211, 155, 81)" class="tels">{{data[index].mobile}}</a></p>
                <p>提交时间：{{data[index].create_time}}</p>
            </div>
            <div class="couponBtn">
                <button data-id="{{data[index].id}}" onclick="isAction(this);" {{if data[index].status=='1' }}disabled style="background-color:#ccc;color:#fff" {{/if}} class="aui-btn action-btn">{{data[index].status == '0' ? '待处理' : '已处理'}}</button>
            </div>
        </div>
    </div>
    {{/each}}
</script>
<!-- 核销信息 -->
<script id="hexiaoinfo" type="text/html">
    <div class="topNum" style="margin-top:5rem;">
        <div><label class="datenum">今日销量</label><em class="datenum-val">{{data.sales_volume.today}}</em></div>
        <div><label class="datenum">昨日销量</label><em class="datenum-val">{{data.sales_volume.yesterday}}</em></div>
        <div><label class="datenum">本周销量</label><em class="datenum-val">{{data.sales_volume.week}}</em></div>
        <div><label class="datenum">本月销量</label><em class="datenum-val">{{data.sales_volume.month}}</em></div>
    </div>
    <div class="itemlist">
        {{each data.order as item index}}
        <div class="items" style="margin:.5rem 0;">
            <div style="display: flex;align-items: center; justify-content: space-around;">
                <div style="width:4.5rem;height:4.5rem;border-radius: 50%;">
                    <img style="width:100%;height:100%;border-radius: 50%;margin-top:-.4rem;" src="{{item.user.avatar.filepath}}" alt="">
                    <p style="text-align:center;margin-top:-.4rem;">{{item.user.nickname}}</p>
                </div>
                <div class="desc" style="margin-left:-1rem;">
                    <ul>
                        <li><label>优惠券：</label>{{item.coupon.title?item.coupon.title:'暂无'}}</li>
                        <li><label>积&nbsp;&nbsp;&nbsp;&nbsp;分：</label>{{item.integral}}</li>
                        <li><label>余&nbsp;&nbsp;&nbsp;&nbsp;额：</label>{{item.balance}}</li>
                        <li><label>总金额：</label>￥{{item.total_amount}}</li>
                        <li><label>时&nbsp;&nbsp;&nbsp;&nbsp;间：</label>{{item.create_time}}</li>
                    </ul>
                </div>
            </div>
        </div>
        {{/each}}
    </div>
</script>

<script type="text/javascript">
    apiready = function() {
        ordersList();
        $('.hexiao').hide();
    };

    //tab切换
    $('.aui-tab-item').each(function() {
        $(this).click(function() {
            $('.aui-tab-item').removeClass('aui-active');
            $(this).addClass('aui-active');
            var currentStatus = $(this).data('status');
            if (currentStatus == '0') {
                ordersList(); //查看全部不记录
                $('.hexiao').hide();
            } else {
                $('.orderList').hide();
                $('.hexiao').show();
                getHexiao(1, 5);
            }
        })
    })

    //查看详情
    $(document).on('click', '.godesc', function() {
        api.openWin({
            name: 'details',
            url: './yddetails/details.html',
            pageParam: {}, //页面代参数
            rect: {
                x: 0,
                y: 0,
                w: api.winWidth,
                h: api.winHeight
            }
        });
    });

    //预订全部记录
    function ordersList() {
        $.ajax({
            url: dns + 'user/booking/merchant/order',
            type: 'GET',
            data: {},
            beforeSend: function(request) {
                request.setRequestHeader("token", localStorage.getItem('token'));
            },
            success: function(res) {
                if (res.data) {
                    $('.Isnone').hide();
                    $('.orderList').show();
                    var html = template('OrderTemplate', {
                        data: res.data
                    });
                    $('.orderList').html(html);
                    $(".tels").each(function () {
                      $(this).click(function () {
                        var mobile = $(this).text();
                        $(this).attr("href","tel:"+mobile+"")
                      })
                    })
                } else {
                    $('.orderList').hide();
                    $('.Isnone').show();
                }
            },
        });
    };

    //处理审核
    function isAction(e) {
        var id = $(e).data('id');
        api.confirm({
            title: "温馨提示",
            msg: "确定要提交处理吗?",
            buttons: ["是", "否"]
        }, function(ret, err) {
            if (ret.buttonIndex == 1) { //确认
                $.ajax({
                    url: dns + 'user/booking/merchant/check',
                    type: 'GET',
                    data: {
                        'id': id
                    },
                    success: function(res) {
                        window.location.reload();
                    },
                    error: function(err) {
                        console.log(JSON.parse(err.responseText).msg);
                    }
                });
            } else {
                return;
            }
        });
    };

    //核销信息
    function getHexiao(page, limit) {
        $.ajax({
            url: dns + 'merchant/order',
            type: 'GET',
            data: {
                'page': page,
                'limit': limit
            },
            beforeSend: function(request) {
                request.setRequestHeader("token", localStorage.getItem('token'));
            },
            success: function(res) {
                console.log(JSON.stringify(res));
                if (res.data) {
                    $('.hexiao').show();
                    var html = template('hexiaoinfo', {
                        data: res.data
                    });
                    $('.hexiao').html(html);
                } else {
                    $('.hexiao').hide();
                    $('.Isnone').show();
                }
            },
        });
    };
</script>

</html>
